<template>
  <div>
    <!-- 操作日志 -->
    <el-dialog title="操作日志" :visible.sync="dialogVisibleLog" width="30%">
      <ul class="log-card">
        <div class="log-card-li">
          <li v-for="(item, index) in logList.data" :key="index">
            <label class="create_time">{{ item.create_time }}</label>
            <label class="create_time">{{ item.create_user }}</label>
            <label class="create_time">{{ item.operation }}</label>
            <label>{{ item.original_num }} -> {{ item.now_num }}</label>
          </li>
        </div>
        <li>
          <Pagination ref="pagination" class="flex-x-start" />
        </li>
      </ul>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleLog = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleLog = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { Stock } from '@/api/stock/stock'
import Pagination from '@/components/Pagination'
export default {
  name: 'Dialog',
  components: {
    Pagination
  },
  data() {
    return {
      dialogVisibleLog: false,
      logList: [],
      pagination: {
        page: 1,
        per_page: 30
      },
      sku_code: ''
    }
  },
  methods: {
    async showLog(sku_code) {
      this.sku_code = sku_code
      this.dialogVisibleLog = true
      await this.getLog()
    },
    async getLog() {
      const currentPage = {
        sku_code: this.sku_code
      }
      await Stock.pageStorageStockOperation({ ...currentPage, ...this.pagination }).then((res) => {
        this.logList = res.data
        this.dialogVisibleLog = true
        this.initPagination({
          page: res.data.current_page,
          total: res.data.total,
          per_page: res.data.per_page
        })
      }).catch(() => {})
    },
    // 分页
    initPagination(data) {
      this.$refs.pagination.init({ ...data, cb: (res) => {
        this.pagination = res
        this.getLog()
      } })
    }
  }
}
</script>
<style lang="scss" scoped>
.log-card{
  list-style: none;
  color: #666666;
  margin: 0;
  li{
    line-height: 30px;
    .create_time{
      margin-right: 20px;
    }
  }
  &-li{
    height: 600px;
    overflow-y: scroll;
  }
}
.flex-x-start{
  justify-content: flex-start;
}
::v-deep .el-dialog__body{
  padding: 0 20px;
}
</style>
